<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">                       
            <el-form-item label="名称:" prop="name">
                <el-input
                v-model="queryParams.name"
                placeholder="请输入上游服务名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
           
            <el-form-item label="标签:" prop="tags">
                <el-input
                v-model="queryParams.tags"
                placeholder="请输入上游服务标签信息"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>

        </el-form>

         <!-- 表工具lan 新增删除等 -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['kong:upstream:add']"                
                >新增</el-button>
            </el-col>

            <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['kong:upstream:export']"
                >导出</el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

        </el-row>

        <el-table v-loading="loading" :data="upstreams">
            <el-table-column label="名称" align="center" prop="name"></el-table-column>
            <el-table-column label="负载平衡算法" align="center" prop="algorithm"></el-table-column>
            <el-table-column label="上游目标" align="center">
                <template slot-scope="scope">
                    <el-popover v-for="item in scope.row.kongTargets.data" trigger="click" placement="top" :key="item.target">
                        <el-descriptions  class="margin-top" :column="3"  border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    目标信息:
                                </template>
                                {{item.target}}
                            </el-descriptions-item>
                            
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    配置权重:
                                </template>
                                {{item.weight}}
                            </el-descriptions-item>
                            
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    创建时间:
                                </template>
                                {{dateFormatLong(item.created_at)}}
                            </el-descriptions-item>

                        </el-descriptions>
                        <div slot="reference" class="name-wrapper">
                            <el-button type="text" size="medium">{{item.target}}[{{item.weight}}]</el-button>
                        </div> 
                    </el-popover>
                </template>
            </el-table-column>            
            <el-table-column label="插槽数" align="center" prop="slots"></el-table-column>
            <el-table-column label="id" align="center" prop="id"></el-table-column>         
            <el-table-column label="标签" align="center" prop="tags"></el-table-column>    
            <el-table-column label="创建时间" align="center" prop="created_at" :formatter="dateFormat"></el-table-column>                
            <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['kong:profile:edit']"
                    >编辑</el-button>

                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['kong:profile:remove']"
                    >删除</el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增上游服务" v-if="addOpen" :visible.sync="addOpen" append-to-body width="800px">
            <add-upstream @callback="handleCloseAddUpstreamDialog" />
        </el-dialog>

        <el-dialog title="编辑上游服务" v-if="editOpen" :visible.sync="editOpen" append-to-body width="900px"  @close="handleCloseEditDialog" >
            <edit-upstream :upstreamId="upstreamEntity.id" :upstreamEntity="upstreamEntity"/>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment'
import {UpstreamList,deleteUpstream} from "@/api/kong/upstream"
import addUpstream from './addUpstream.vue'
import EditUpstream from './editUpstream.vue'
export default {
  components: { addUpstream, EditUpstream },
    data(){
        return{
            upstreams: [],
            loading: false,
            // 搜索显示标识
            showSearch: true,
            // 查询条件
            queryParams:{
                pageNum: 1,
                pageSize: 10,
            },
            // 总条数
            total: 0,
            // 表单校验
            rules:{},
            exportLoading: false,
            multiple: false,
            single: false,
            addOpen: false,
            editOpen: false,
            upstreamEntity: null,
        }
    },
    created(){
        this.getList();
    },
    methods: {
        getList(){
                UpstreamList().then(res =>{
                this.upstreams=res.rows;
                // console.log(JSON.stringify(res))
            })
        },
        handleAdd(){
            this.addOpen=true;
        },
        handleCloseAddUpstreamDialog(payload){
            this.getList();
            this.addOpen=false;
        },
        handleUpdate(row){
            this.upstreamEntity=row;
            this.editOpen=true;
        },
        handleDelete(row){
            this.$confirm('是否确认删除上游代理："' + row.name + '"的数据项?', "警告",{                
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function(){
                return deleteUpstream(row.id);
            }).then(res =>{
                this.getList();
                this.msgSuccess("删除成功");
            })
            
        },
        handleQuery(){},
        handleExport(){},
        handleCloseEditDialog(){
            console.log('调用了')
            this.getList();
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
        dateFormatLong(_date){
            if(_date ==undefined){return ''};
            return moment(_date*1000).format("YYYY-MM-DD HH:mm:ss");
        },
    }

}
</script>
<style scoped>

</style>